<template>
  <div style="min-width: 700px">
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('update:isShowUserProtocol', false)"></jxf-titletip>
    <div class="main mt20">
      <el-form :model="userProtocolInfo" ref="userProtocolInfo" class="userProtocol" label-width="160px" :rules="rules">
        <div class="basicInfo">
          <el-form-item prop="agrname" required label="协议名称：">
            <el-input v-model="userProtocolInfo.agrname" placeholder="请输入协议名称"></el-input>
          </el-form-item>
          <el-form-item prop="isForce" required label=" 是否开启强制更新：">
            <el-radio v-model="userProtocolInfo.isForce" label="1">是</el-radio>
            <el-radio v-model="userProtocolInfo.isForce" label="0">否</el-radio>
          </el-form-item>
        </div>
        <div class="userProtocolContent">
          <el-form-item prop="agrTemp" label="协议模板：" required>
            <div id="editorElem" style="text-align:left"></div>
          </el-form-item>
          <el-form-item>
            <div class="btnGroup">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AddUserProtocol",
    props: {
      isShowUserProtocol: {
        type: Boolean,
        default: true
      },
      userProtocolInfo: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: "发布协议"
      }
    },
    data() {
      return {
        rules: {
          agrname: [
            { required: true, message: '请输入协议的内容', trigger: ['blur', 'change'] },
          ],
          isForce: [
            { required: true, message: '请选择是否强制更新', trigger: ['blur', 'change'] },
          ],
          agrTemp: [
            { required: true, message: '请输入协议模板', trigger: ['blur', 'change'] },
          ]
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs['userProtocolInfo'].validate((valid) => {
          if (valid) {
            ajax.post(apis.setting.settingAgreement, this.userProtocolInfo).then(result => {
              if(result.code == "10000000") {
                this.$message({
                  type: 'success',
                  message: '新增协议成功!'
                });
                this.$refs['userProtocolInfo'].resetFields()
                this.$emit("fresh")
                this.$emit('clearInfo')
                this.$emit('update:isShowUserProtocol', false)
              } else {
                this.$message.error(result.message)
              }
            })
          }})
          }
    },
    mounted() {
      var editor = new Editor('#editorElem')
      editor.customConfig.onchange = (html) => {
        this.userProtocolInfo.agrTemp = html
      }
      editor.create()
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    display: flex;
    min-height: 800px;
    justify-content: flex-start;
    background: #fff;
    .userProtocol {
      padding: 40px 0 0 150px;
      margin-top: 20px;
      min-width: 500px;
      border-radius: 4px;
      box-sizing: border-box;
      .el-input {
        width: 80%;
        max-width: 400px;
      }
      .basicInfo {
        position: relative;
        width: 640px;
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
      }
      .announcementContent {
        position: relative;
        top: 20px;
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
        #editorElem {
          width: 60%;
        }
        .btnGroup {
          margin-top: 20px;
          .el-button {
            padding: 12px 40px;
          }
        }
      }
    }
  }
</style>
